<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { timeFormat, toYuan, timeFormatYMD, copyToCliboard } from '@/hooks/util'
import * as quotationRulesApi from '@/api/quotationRules'
import * as accountApi from '@/api/account'
import { message } from 'ant-design-vue'
import AddRole from './components/AddRole.vue'
import ImportRule from './components/ImportRule.vue'
import Modal from '../../components/Modal/index.vue'
import addTemplateContent from './components/AddTemplate.vue'
import * as tempalteApi from '@/api/template'
import * as CinemasApi from '@/api/Cinemas'
import SendTemplate from './components/SendTemplate.vue'
const sendTemplateRef = ref()

const screenWidth = ref(0)
const screenHeight = ref(0)

function updateScreenSize() {
  screenWidth.value = window.innerWidth
  screenHeight.value = window.innerHeight
}
const router = useRouter()

const AddRoleRef = ref()
const AddTemplateRef = ref()

const ImportRuleRef = ref()

interface Pagination {
  page: number
  pageSize: number
  total: number
  current?: number
  onChange: Function
  showSizeChanger: boolean
  showQuickJumper: boolean
}

const handlePageChange = (page: any, pageSize: any) => {
  // console.log(page, pageSize)
  pagination.value.pageSize = pageSize
  searchParams.value.pageSize = pageSize
}

const pagination = ref<Pagination>({
  page: 1,
  pageSize: 10,
  total: 0,
  onChange: handlePageChange,
  showSizeChanger: true,
  showQuickJumper: true,
})
let loading = ref<boolean>(false)

interface SearchParams {
  currentPage: number
  pageSize: number
  robotId?: string
  ruleName?: string
  [propName: string]: any
}
const searchParams = ref<SearchParams>({
  currentPage: pagination.value.page,
  pageSize: pagination.value.pageSize,
})

interface Pagination1 {
  page: number
  pageSize: number
  total: number
  current?: number
  onChange: Function
  showSizeChanger: boolean
}

const handlePageChange1 = (page: any, pageSize: any) => {
  pagination1.value.pageSize = pageSize
}

const pagination1 = ref<Pagination1>({
  page: 1,
  pageSize: 10,
  total: 0,
  onChange: handlePageChange1,
  showSizeChanger: true,
})
let loading1 = ref<boolean>(false)

interface SearchParams1 {
  currentPage: number
  pageSize: number
}
const searchParams1 = ref<SearchParams1>({
  currentPage: pagination1.value.page,
  pageSize: pagination1.value.pageSize,
})
const columns1 = [
  // {
  //   title: 'ID',
  //   key: 'id',
  //   width: 200,
  // },
  {
    title: '院线名称',
    key: 'lineName',
    width: 200,
  },

  {
    title: '影院数量',
    key: 'cinemaCount',
    width: 200,
  },
  {
    title: '操作',
    key: 'action',
    width: 150,
    fixed: 'right',
    align: 'center',
  },
]

const dataSource = ref([])
const columns = [
  {
    title: '规则信息',
    key: 'ruleName',
    width: 360,
  },
  {
    title: '报价信息',
    key: 'price',
    width: 400,
  },
  {
    title: '影片类型',
    key: 'planType',
    width: 400,
  },
  {
    title: '省份/城市',
    key: 'province',
    width: 400,
  },
  {
    title: '影院/影厅',
    key: 'fileHall',
    width: 400,
  },
  {
    title: '影片/票数/包含院线',
    key: 'filmName',
    width: 400,
  },
  {
    title: '日期/时间/排除院线',
    key: 'beginShowTime',
    width: 400,
  },
  {
    title: '首选/备选渠道',
    key: 'matchChannel',
    width: 400,
  },
  {
    title: '操作',
    key: 'action',
    width: 150,
    fixed: 'right',
  },
]

const quotationTypeList = ref<SelectProps['options']>([
  {
    label: '比例',
    value: '1',
  },
  {
    label: '减法',
    value: '2',
  },
  {
    label: '固定金额',
    value: '3',
  },
  {
    label: '溢价',
    value: '4',
  },
])

// 处理最终报价调整类型
const finalPriceAdjustTypeList = ref<SelectProps['options']>([
  {
    label: '四舍五入到整数元',
    value: 1,
  },
  {
    label: '四舍五入到元-0.1',
    value: 2,
  },
  {
    label: '到0.5/整数元',
    value: 3,
  },
  {
    label: '不调整',
    value: 0,
  },
])

// 翻页
const changePage = (e: any) => {
  pagination.value.current = e.current
  pagination.value.pageSize = e.pageSize

  searchParams.value.currentPage = pagination.value.current as number
  getList()
}

const changePage1 = (e: any) => {
  pagination1.value.current = e.current
  pagination1.value.pageSize = e.pageSize
  searchParams1.value.currentPage = pagination1.value.current as number
  // getList()
  getCinemaList()
}
const getList = async () => {
  loading.value = true
  try {
    const {
      state,
      data,
      message: msg,
    } = await quotationRulesApi.getQuotationRuleList(searchParams.value)
    if (state === 200) {
      if (data) {
        data?.list.forEach((item: any) => {
          item.ruleStatus ? (item.ruleStatus = true) : (item.ruleStatus = false)
        })
        dataSource.value = data?.list || []
        pagination.value.total = Number(data.totalCount)
      } else {
        dataSource.value = []
      }
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
  loading.value = false
}

// 拉取机器人列表
let okRobat = ref<string>()
let okRobatLabel = ref<string>()
import type { SelectProps } from 'ant-design-vue'
const robatList = ref<SelectProps['options']>([])

interface OptionList {
  label: string
  value: string
}
let optionList = ref<Array<OptionList>>([])
const getRobatList = async () => {
  const params = {
    currentPage: 1,
    pageSize: 100,
  }
  try {
    let { state, data, message: msg } = await accountApi.getFishRobotList(params)
    if (state === 200) {
      robatList.value = data.list
      optionList.value = data.list.map((item: any) => {
        return {
          label: item.nickName,
          value: item.id,
        }
      })

      optionsArr.value = data.list
      if (data.list.length == 0) {
        message.error('闲鱼：无平台账号，请先添加平台账号')
      } else if (data.list.length > 0) {
        selectRobat(data.list[0].id)
      }
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
}
const selectRobat = (selectValue: unknown) => {
  okRobat.value = selectValue as string
  okRobatLabel.value = optionList.value.find(item => item.value == selectValue)?.label
  // console.log('okRobatLabel=', okRobatLabel.value)
  searchParams.value.robotId = okRobat.value
  getList()
}

onMounted(() => {
  getRobatList()
  getGroupList()
  updateScreenSize()

  // getList()
})

// 查询
const formRef = ref()
interface FormState {
  ruleName?: string
  quotationType?: string
  finalPriceAdjustType?: string | number
}
const formState = reactive<FormState>({})
const search = () => {
  pagination.value.current = 1
  searchParams.value.currentPage = 1
  formRef.value.validate().then(() => {
    // console.log('formState=', formState)
    searchParams.value.ruleName = formState.quotationType != '' && formState.ruleName
    searchParams.value.quotationType = formState.quotationType != '' && formState.quotationType
    searchParams.value.finalPriceAdjustType =
      formState.finalPriceAdjustType != '' && formState.finalPriceAdjustType
    // console.log('searchParams=', searchParams.value)
    getList()
  })
}

// 重置
const reset = () => {
  pagination.value.current = 1
  searchParams.value.currentPage = 1

  formRef.value.resetFields()
  for (let key in searchParams.value) {
    if (key != 'currentPage' && key != 'pageSize' && key != 'robotId')
      searchParams.value.hasOwnProperty(key) && delete searchParams.value[key]
  }

  getList()
}

const del = async (id: string) => {
  try {
    const { state, message: msg } = await quotationRulesApi.deleteQuotationRule({ id })
    if (state === 200) {
      message.success('删除成功')
      getList()
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
}

const addRole = () => {
  AddRoleRef.value.showModal(okRobat.value, {}, 3)
}

const edit = (record: any) => {
  if (record.ruleStatus == '1') {
    message.error('报价规则已启用，不能修改')
  } else {
    AddRoleRef.value.showModal(okRobat.value, record, 3)
  }
}

const handleChangeRules = async (record: any) => {
  try {
    const { state, message: msg } = await quotationRulesApi.EditRuleState({
      id: record.id,
      ruleStatus: record.ruleStatus ? 1 : 0,
    })
    if (state === 200) {
      message.success('操作成功')
      getList()
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
}

// 过滤
const getFilterlist = (list: Array<any> = [], type: number) => {
  if (list.length > 0) {
    // console.log('list', list.filter(item => item.containStatus == type))

    return list.filter(item => item.containStatus == type)
  } else {
    return []
  }
}

// 推送
const groupList = ref<SelectProps['options']>([])
const groupId = ref<string>()
const optionsArr = ref<SelectProps['options']>([])
const getGroupList = async () => {
  try {
    let { state, data, message: msg } = await accountApi.getFishRobotGroupList()
    if (state === 200) {
      groupList.value = data
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
}
const selectGroup = (selectValue: any) => {
  groupId.value = selectValue as string
  sendRobat.value = optionsArr
    .value!.filter(item => item.groupId == groupId.value)
    .map(item => item.id)
}

// 推送配置
let sendRobat = ref<Array<string>>()
const selectSendRobat = (selectValue: any) => {
  sendRobat.value = selectValue
}
const pushRobot = async () => {
  console.log('okRobat=', okRobat.value)
  console.log('sendRobat=', sendRobat.value)
  let params = {
    acceptRobotIds: sendRobat.value,
    channel: 3,
    sendRobotId: okRobat.value,
  }
  try {
    const { state, message: msg } = await quotationRulesApi.quotationRulePushArriveRobots(params)
    if (state === 200) {
      message.success('操作成功')
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
}
const sendOk = () => pushRobot()

// select搜索
const filterOption = (input: string, option: any) => {
  return option.label.indexOf(input) >= 0
}

// 导入规则
const importRole = () => {
  ImportRuleRef.value.showModal(okRobat.value, 3, okRobatLabel.value)
}

// 复制规则
const copyRule = (id: string) => {
  copyToCliboard(id)
  // message.success('复制成功')
}

// 处理2/3D
const edit23D = (str: string) => {
  if (str != '0') {
    let list = str.split(',').map(item => {
      if (item == '1') {
        return '2D'
      } else if (item == '2') {
        return '3D'
      } else if (item == '3') {
        return '2/3D'
      }
    })
    return list.join(',')
  } else {
    return '2D,3D,2/3D'
  }
}

const TemplateId = ref('')
const getTHEID = id => {
  console.log('id=', id)
  TemplateId.value = id
}

const handleConfirm = async () => {
  console.log('okRobat=====', okRobat.value)
  console.log('TemplateId=====', TemplateId.value)
  // return

  try {
    const { state, message: msg } = await tempalteApi.installGroupQuotationRule({
      groupId: TemplateId.value || localStorage.getItem('checkbox-templateId'),
      robotId: okRobat.value,
    })
    if (state === 200) {
      message.success('操作成功')
      localStorage.removeItem('checkbox-templateId')
      AddTemplateRef.value.setVisible(false)
    } else {
      message.error(msg)
    }
  } catch (error) {
    console.log(error)

    message.error('网络请求连接失败~')
  }
}

//自定义影院设置
let CustomizeRef = ref(null)

const cameraDataSet = () => {
  getCinemaList()
  CustomizeRef.value.setVisible(true)
}
let dataSource1 = ref([])
//获取自定义院线列表
const getCinemaList = async () => {
  try {
    let { state, data, message: msg } = await CinemasApi.CinemaList(searchParams1.value)
    if (state == 200) {
      dataSource1.value = data.list
      pagination1.value.total = Number(data.totalCount)
    } else {
      message.error(msg)
    }
  } catch (error) {
    console.log(error, 'error')

    message.error('操作失败~')
  }
}

let CinemasRef = ref(null)

const CameraForm = ref({
  name: '',
})
const handleConfiormAddCamera = async () => {
  if (CameraForm.value.name == '') {
    message.error('请输入院线名称')
    return
  }
  try {
    let {
      state,
      data,
      message: msg,
    } = await CinemasApi.AddCinema({
      lineName: CameraForm.value.name,
    })
    if (state == 200) {
      message.success('添加成功')
      CinemasRef.value.setVisible(false)
      getCinemaList()
    } else {
      message.error(msg)
    }
  } catch (error) {
    console.log(error, 'error')

    message.error('操作失败~')
  }
}
let AssociatedRef = ref(null)
//关联影院
const handleConfiormAssociated = async () => {
  if (selectedCinemaList.value.length == 0) {
    message.error('请选择影院')
    return
  }
  selectedCinemaList.value = selectedCinemaList.value.map(item => {
    return {
      ...item,
      cinemaId: item.cinemaId,
    }
  })

  try {
    let {
      state,
      data,
      message: msg,
    } = await CinemasApi.RelCinema({
      lineId: associatedForm.value.id,
      relS: selectedCinemaList.value,
    })
    if (state == 200) {
      message.success('关联成功')
      AssociatedRef.value.setVisible(false)
      getCinemaList()
    } else {
      message.error(msg)
    }
  } catch (error) {
    console.log(error, 'error')

    message.error('操作失败~')
  }
}
let associatedForm = ref({})

let cinemasValue = ref('')
//搜索
const onCinemasSearch = () => {}
//关联影院
const Associated = async (record: any) => {
  associatedForm.value = record
  getCityList()
  // setTimeout(() => {
  AssociatedRef.value.setVisible(true)
  getAassociatedList()
  // }, 1000)
}
//删除
const handleDelete = async (record: any) => {
  try {
    let {
      state,
      data,
      message: msg,
    } = await CinemasApi.delCinema({
      id: record.id,
    })
    if (state == 200) {
      message.success('删除成功')
      getCinemaList()
    } else {
      message.error(msg)
    }
  } catch (error) {
    console.log(error, 'error')

    message.error('操作失败~')
  }
}

let cityVal = ref(0)

//监听店铺选择
watch(cityVal, newVal => {
  CinemaParams.value.currentPage = 1
  allCheck.value = false
  // searchValue.value = ''
  CinemaParams.value.pageSize = 100
  delete CinemaParams.value.cinemaName
  getCinema(cityVal.value, 0)
})
let cityList = ref([])
const getCityList = async () => {
  try {
    let { state, data, message: msg } = await CinemasApi.getCity()
    if (state == 200) {
      console.log(data, '1')

      cityList.value = data.map(item => {
        return {
          label: item.cityName,
          value: item.id,
        }
      })
      cityList.value.unshift({
        label: '全部',
        value: 0,
      })

      getCinema(cityVal.value, 0)
    } else {
      message.error(msg)
    }
  } catch (error) {}
}

const selectCity = (selectValue: unknown) => {
  cityVal.value = selectValue as string
  // searchParams.value.robotId = okRobat.value
  // getList()
}

const CinemaList = ref([]) //左边的数据
const allCheck = ref(false) //总选中框
const selectedCinemaList = ref([]) //右边的数据
const TemporaryList = ref([]) //暂存的数据
const CinemaParams = ref({ currentPage: 1, pageSize: 100, cinemaName: '' })

//全选操作
const handelAllChecked = e => {
  if (e.target.checked) {
    CinemaList.value.forEach(item => {
      item.state = true
      const isInSelectedList = TemporaryList.value.some(
        existingItem => existingItem.cinemaId === item.cinemaId,
      )
      if (!isInSelectedList) {
        TemporaryList.value.push(item)
      }
    })
  } else {
    CinemaList.value.forEach(item => {
      item.state = false
    })
    TemporaryList.value = []
  }
}

//滚动scroll
const scrollBox = ref()
const handleScroll = () => {
  if (scrollBox.value.scrollTop + scrollBox.value.clientHeight >= scrollBox.value.scrollHeight) {
    // 滚动到底部的逻辑
    CinemaParams.value.currentPage++
    getCinema(cityVal.value, 1)
    // 例如，你可以在这里发起一个请求来加载更多数据
  }
}

// 获取影院列表 0 筛选 1 分页
const getCinema = async (areaId: any, type: any) => {
  CinemaParams.value.areaId = areaId
  if (!CinemaParams.value.areaId) {
    delete CinemaParams.value.areaId
  }
  try {
    let { state, data, message: msg } = await CinemasApi.GetCinemaList(CinemaParams.value)
    if (state === 200) {
      data.list.forEach(item => {
        item.state = false
        item.cinemaId = item.id
      })

      if (type) {
        CinemaList.value = [...CinemaList.value, ...data.list]
        allCheck.value = CinemaList.value.every(item => item.state)
      } else {
        CinemaList.value = data.list
      }
    } else {
      message.error(msg)
    }
  } catch (error) {
    console.log(error, 'error')

    message.error('网络请求连接失败~')
  }
}
//全选判断
const isCheckedAll = () => {
  return CinemaList.value.every(item => item.state)
}
//右侧选择项 处理
const selectedGoodsItem = async (item: any, index: any) => {
  if (item.state) {
    TemporaryList.value.push(item)
  } else {
    // 如果复选框被取消选中，从 TemporaryList 中移除 item
    const indexToRemove = TemporaryList.value.findIndex(
      listItem => listItem.cinemaId === item.cinemaId,
    )
    if (indexToRemove !== -1) {
      TemporaryList.value.splice(indexToRemove, 1)
    }
  }
  allCheck.value = await isCheckedAll()
}
//删除宝贝项
const deleteGoodsItem = async (index: any, item: any) => {
  TemporaryList.value.splice(index, 1)
  selectedCinemaList.value.splice(index, 1)
  CinemaList.value.forEach(row => {
    if (row.cinemaId === item.cinemaId) {
      row.state = false
    }
  })
  allCheck.value = await isCheckedAll()
}

//选择宝贝到右侧
const handleClickTemporary = () => {
  // selectedCinemaList.value = []
  if (TemporaryList.value.length) {
    TemporaryList.value.forEach((item1: any) => {
      // selectedGoodsList.value.//右边数据
      const isInSelectedList = selectedCinemaList.value.some(
        (item2: any) => item1.cinemaId === item2.cinemaId,
      )
      if (!isInSelectedList) {
        selectedCinemaList.value.push(item1)
      }
    })
  }
  console.log(selectedCinemaList.value, CinemaList.value)

  selectedCinemaList.value.forEach(item1 => {
    CinemaList.value.forEach(item2 => {
      if (item1.cinemaId == item2.cinemaId) {
        item1 = item2
      }
    })
  })
}

const onSearchCinema = () => {
  CinemaParams.value.currentPage = 1
  allCheck.value = false

  getCinema(cityVal.value, 0)
}

const getAassociatedList = async () => {
  try {
    let {
      state,
      data,
      message: msg,
    } = await CinemasApi.GetHistoryList({
      lineId: associatedForm.value.id,
    })
    if (state == 200) {
      console.log(data, '1')
      data.forEach(item => {
        CinemaList.value.forEach(row => {
          if (row.id == item.cinemaId) {
            row.state = true
          }
        })
      })
      selectedCinemaList.value = data
    } else {
      message.error(msg)
    }
  } catch (error) {}
}

// 简易预报价
// const preQuotation = () => {
//   router.push({ path: '/pre-quotation' })
// }
let addTemplateContentRef = ref()
const SettingTemplate = () => {
  AddTemplateRef.value.setVisible(true)
  addTemplateContentRef.value.dispthChild()
}
</script>

<template>
  <div style="margin: 5px 0; text-align: right">
    <span>选择闲鱼账号：</span>
    <a-select
      v-model:value="okRobat"
      @change="selectRobat"
      placeholder="请选择"
      style="width: 200px; text-align: left"
      show-search
      :options="optionList"
      :filter-option="filterOption"
    >
      <a-select-option v-for="(item, index) in optionList" :key="index" :value="item.value">
        {{ item.label }}
      </a-select-option>
    </a-select>
  </div>

  <div class="searchBox">
    <a-form ref="formRef" layout="inline" :model="formState">
      <a-form-item label="规则名称" name="ruleName">
        <a-input v-model:value="formState.ruleName" placeholder="规则名称" style="width: 200px" />
      </a-form-item>
      <a-form-item label="报价方式" name="quotationType">
        <a-select v-model:value="formState.quotationType" placeholder="请选择" style="width: 200px">
          <a-select-option
            v-for="(item, index) in quotationTypeList"
            :key="index"
            :value="item.value"
          >
            {{ item.label }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <!-- <a-form-item name="finalPriceAdjustType">
        <template #label>
          <span style="margin-left: 15px">报价调整类型</span>
        </template>
        <a-select
          v-model:value="formState.finalPriceAdjustType"
          placeholder="请选择"
          style="width: 150px"
        >
          <a-select-option
            v-for="(item, index) in finalPriceAdjustTypeList"
            :key="index"
            :value="item.value"
          >
            {{ item.label }}
          </a-select-option>
        </a-select>
      </a-form-item> -->
    </a-form>
    <a-button type="primary" @click="search" style="border-radius: 6px">
      <template #icon>
        <SearchOutlined />
      </template>
      搜索
    </a-button>
    <a-button @click="reset">重置</a-button>
    <a-button type="primary" @click="addRole">新增规则</a-button>
    <a-button type="primary" @click="importRole">导入规则</a-button>
    <a-button type="primary" @click="sendTemplateRef.showModal()">模板列表</a-button>
    <a-button type="primary" @click="cameraDataSet">自定义院线设置</a-button>
  </div>

  <a-alert
    description="小提示：只要鼠标在表格上，按住左Shift键并滚动鼠标滚轮就可以横向滚动表格"
    type="info"
    banner
    style="margin-bottom: 10px; padding: 10px"
  />

  <a-table
    style="overflow-x: scroll"
    :columns="columns"
    :data-source="dataSource"
    :pagination="pagination"
    :loading="loading"
    @change="changePage"
    rowKey="id"
    size="small"
    :scroll="{ x: 100 }"
  >
    <template #emptyText>
      <a-empty description="暂无数据" />
    </template>

    <template #headerCell="{ column }">
      <template v-if="column.key === 'id'">
        <span>id</span>
      </template>
    </template>

    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'id'">
        <div style="width: 150px">{{ record.id }}</div>
      </template>

      <template v-else-if="column.key === 'ruleName'">
        <a-descriptions bordered size="small" :column="1" :labelStyle="{ width: '110px' }">
          <a-descriptions-item label="规则名称">
            <a-tooltip placement="top" v-if="!record.isRemarkShow">
              <template #title>
                <span>{{ record.ruleName }}</span>
              </template>
              <span class="hiddenText">{{ record.ruleName }}</span>
              <a @click="copyRule(record.id)"><CopyOutlined /></a>
            </a-tooltip>
          </a-descriptions-item>

          <a-descriptions-item label="影院名匹配">
            <div v-if="record.cinemaNameType == 1">精准匹配</div>
            <div v-if="record.cinemaNameType == 2">模糊匹配</div>
          </a-descriptions-item>

          <!-- <a-descriptions-item label="2/3D">
              <span>{{ edit23D(record.customFilmType) }}</span>
            </a-descriptions-item> -->

          <a-descriptions-item label="开关状态">
            <div v-if="record.ruleStatus == 0">
              <span
                style="
                  width: 6px;
                  height: 6px;
                  background-color: red;
                  display: inline-block;
                  border-radius: 50%;
                "
              ></span>
              已停用
            </div>
            <div v-if="record.ruleStatus == 1">
              <span
                style="
                  width: 6px;
                  height: 6px;
                  background-color: #01ff01;
                  display: inline-block;
                  border-radius: 50%;
                "
              ></span>
              已启用
            </div>
          </a-descriptions-item>
          <a-descriptions-item label="更新时间">
            {{ timeFormat(record.updateTime) }}
          </a-descriptions-item>
        </a-descriptions>
      </template>

      <template v-else-if="column.key === 'planType'">
        <a-descriptions bordered size="small" :column="1" :labelStyle="{ width: '120px' }">
          <!-- 2/3d - 新 -->
          <a-descriptions-item label="包含影片类型">
            <a-tooltip placement="top" v-if="getFilterlist(record.planTypeList, 1).length > 0">
              <template #title>
                <template v-for="item in record.planTypeList">
                  <a-tag v-if="item.containStatus == 1" color="blue">
                    {{ item.name }}
                  </a-tag>
                </template>
              </template>
              <div class="hiddenText">
                <template v-for="item in record.planTypeList">
                  <span v-if="item.containStatus == 1" color="blue">{{ item.name }},</span>
                </template>
              </div>
            </a-tooltip>
            <div v-else>不限制</div>
          </a-descriptions-item>

          <a-descriptions-item label="排除影片类型">
            <a-tooltip placement="top" v-if="getFilterlist(record.planTypeList, 0).length > 0">
              <template #title>
                <template v-for="item in record.planTypeList">
                  <a-tag v-if="item.containStatus == 0" color="blue">
                    {{ item.name }}
                  </a-tag>
                </template>
              </template>
              <div class="hiddenText">
                <template v-for="item in record.planTypeList">
                  <span v-if="item.containStatus == 0" color="blue">{{ item.name }},</span>
                </template>
              </div>
            </a-tooltip>
            <div v-else>不限制</div>
          </a-descriptions-item>
          <!-- 2/3d - 新 -->
          <a-descriptions-item label="报价调整类型">
            <div v-if="record.finalPriceAdjustType == 0">不调整</div>
            <div v-if="record.finalPriceAdjustType == 1">四舍五入到整数元</div>
            <div v-if="record.finalPriceAdjustType == 2">四舍五入到元-0.1</div>
            <div v-if="record.finalPriceAdjustType == 3">到0.5/整数元</div>
          </a-descriptions-item>
        </a-descriptions>
      </template>

      <template v-else-if="column.key === 'matchChannel'">
        <a-descriptions bordered size="small" :column="1" :labelStyle="{ width: '140px' }">
          <a-descriptions-item label="首选供应渠道">
            <a-tag color="blue" v-if="record.matchChannel == 3">麻花电影票（可限价）</a-tag>
            <a-tag color="blue" v-if="record.matchChannel == 5">芒果电影票（一口价）</a-tag>
            <a-tag color="blue" v-if="record.matchChannel == 6">哈哈电影票</a-tag>
            <a-tag color="blue" v-if="record.matchChannel == 11">守兔电影票（一口价）</a-tag>
            <a-tag color="blue" v-if="record.matchChannel == 7">守兔电影票（可限价）</a-tag>
            <a-tag color="blue" v-if="record.matchChannel == 8">星驰电影票（一口价）</a-tag>
            <a-tag color="blue" v-if="record.matchChannel == 9">哈哈电影快票（固定9折）</a-tag>
            <a-tag color="blue" v-if="record.matchChannel == 10">影划算电影票（可限价）</a-tag>
            <a-tag color="blue" v-if="record.matchChannel == 88">芒果电影票（可限价）</a-tag>
            <a-tag color="blue" v-if="record.matchChannel == 66">芒果一口价</a-tag>
            <a-tag color="blue" v-if="record.matchChannel == 100">自行出票</a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="备选供应渠道">
            <a-tag color="blue" v-if="record.slaveMatchChannel == 3">麻花电影票（可限价）</a-tag>
            <a-tag color="blue" v-if="record.slaveMatchChannel == 5">芒果电影票（一口价）</a-tag>
            <a-tag color="blue" v-if="record.slaveMatchChannel == 6">哈哈电影票</a-tag>
            <a-tag color="blue" v-if="record.slaveMatchChannel == 11">守兔电影票（一口价）</a-tag>
            <a-tag color="blue" v-if="record.slaveMatchChannel == 7">守兔电影票（可限价）</a-tag>
            <a-tag color="blue" v-if="record.slaveMatchChannel == 8">星驰电影票（一口价）</a-tag>
            <a-tag color="blue" v-if="record.slaveMatchChannel == 9">哈哈电影快票（固定9折）</a-tag>
            <a-tag color="blue" v-if="record.slaveMatchChannel == 10">影划算电影票（可限价）</a-tag>
            <a-tag color="blue" v-if="record.slaveMatchChannel == 88">芒果电影票</a-tag>
            <a-tag color="blue" v-if="record.slaveMatchChannel == 66">芒果一口价</a-tag>
            <a-tag color="blue" v-if="record.slaveMatchChannel == 0">不使用</a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="是否开启限价">
            <a-tag color="blue" v-if="record.enableLimitPrice == 0">不启用</a-tag>
            <a-tag color="blue" v-if="record.enableLimitPrice == 1">启用</a-tag>
          </a-descriptions-item>
        </a-descriptions>
      </template>

      <template v-else-if="column.key === 'province'">
        <a-descriptions bordered size="small" :column="1" :labelStyle="{ width: '100px' }">
          <a-descriptions-item label="包含省份">
            <a-tooltip placement="top" v-if="getFilterlist(record.provinceList, 1).length > 0">
              <template #title>
                <template v-for="item in record.provinceList">
                  <a-tag v-if="item.containStatus == 1" color="blue">
                    {{ item.name }}
                  </a-tag>
                </template>
              </template>
              <div class="hiddenText">
                <template v-for="item in record.provinceList">
                  <span v-if="item.containStatus == 1" color="blue">{{ item.name }},</span>
                </template>
              </div>
            </a-tooltip>
            <div v-else>不限制</div>
          </a-descriptions-item>

          <a-descriptions-item label="排除省份">
            <a-tooltip placement="top" v-if="getFilterlist(record.provinceList, 0).length > 0">
              <template #title>
                <template v-for="item in record.provinceList">
                  <a-tag v-if="item.containStatus == 0" color="blue">
                    {{ item.name }}
                  </a-tag>
                </template>
              </template>
              <div class="hiddenText">
                <template v-for="item in record.provinceList">
                  <span v-if="item.containStatus == 0" color="blue">{{ item.name }},</span>
                </template>
              </div>
            </a-tooltip>
            <div v-else>不限制</div>
          </a-descriptions-item>

          <a-descriptions-item label="包含城市">
            <a-tooltip placement="top" v-if="getFilterlist(record.cityList, 1).length > 0">
              <template #title>
                <template v-for="item in record.cityList">
                  <a-tag v-if="item.containStatus == 1" color="blue">
                    {{ item.name }}
                  </a-tag>
                </template>
              </template>
              <div class="hiddenText">
                <template v-for="item in record.cityList">
                  <span v-if="item.containStatus == 1" color="blue">{{ item.name }},</span>
                </template>
              </div>
            </a-tooltip>
            <div v-else>不限制</div>
          </a-descriptions-item>

          <a-descriptions-item label="排除城市">
            <a-tooltip placement="top" v-if="getFilterlist(record.cityList, 0).length > 0">
              <template #title>
                <template v-for="item in record.cityList">
                  <a-tag v-if="item.containStatus == 0" color="blue">
                    {{ item.name }}
                  </a-tag>
                </template>
              </template>
              <div class="hiddenText">
                <template v-for="item in record.cityList">
                  <span v-if="item.containStatus == 0" color="blue">{{ item.name }},</span>
                </template>
              </div>
            </a-tooltip>
            <div v-else>不限制</div>
          </a-descriptions-item>
        </a-descriptions>
      </template>

      <template v-else-if="column.key === 'fileHall'">
        <a-descriptions bordered size="small" :column="1" :labelStyle="{ width: '100px' }">
          <a-descriptions-item label="包含影院">
            <a-tooltip placement="top" v-if="getFilterlist(record.cinemaList, 1).length > 0">
              <template #title>
                <template v-for="item in record.cinemaList">
                  <a-tag v-if="item.containStatus == 1" color="blue">
                    {{ item.name }}
                  </a-tag>
                </template>
              </template>
              <div class="hiddenText">
                <template v-for="item in record.cinemaList">
                  <span v-if="item.containStatus == 1" color="blue">{{ item.name }},</span>
                </template>
              </div>
            </a-tooltip>
            <div v-else>不限制</div>
          </a-descriptions-item>

          <a-descriptions-item label="排除影院">
            <a-tooltip placement="top" v-if="getFilterlist(record.cinemaList, 0).length > 0">
              <template #title>
                <template v-for="item in record.cinemaList">
                  <a-tag v-if="item.containStatus == 0" color="blue">
                    {{ item.name }}
                  </a-tag>
                </template>
              </template>
              <div class="hiddenText">
                <template v-for="item in record.cinemaList">
                  <span v-if="item.containStatus == 0" color="blue">{{ item.name }},</span>
                </template>
              </div>
            </a-tooltip>
            <div v-else>不限制</div>
          </a-descriptions-item>

          <a-descriptions-item label="包含影厅">
            <a-tooltip placement="top" v-if="getFilterlist(record.filmHallList, 1).length > 0">
              <template #title>
                <template v-for="item in record.filmHallList">
                  <a-tag v-if="item.containStatus == 1" color="blue">
                    {{ item.name }}
                  </a-tag>
                </template>
              </template>
              <div class="hiddenText">
                <template v-for="item in record.filmHallList">
                  <span v-if="item.containStatus == 1" color="blue">{{ item.name }},</span>
                </template>
              </div>
            </a-tooltip>
            <div v-else>不限制</div>
          </a-descriptions-item>

          <a-descriptions-item label="排除影厅">
            <a-tooltip placement="top" v-if="getFilterlist(record.filmHallList, 0).length > 0">
              <template #title>
                <template v-for="item in record.filmHallList">
                  <a-tag v-if="item.containStatus == 0" color="blue">
                    {{ item.name }}
                  </a-tag>
                </template>
              </template>
              <div class="hiddenText">
                <template v-for="item in record.filmHallList">
                  <span v-if="item.containStatus == 0" color="blue">{{ item.name }},</span>
                </template>
              </div>
            </a-tooltip>
            <div v-else>不限制</div>
          </a-descriptions-item>
        </a-descriptions>
      </template>

      <template v-else-if="column.key === 'filmName'">
        <a-descriptions bordered size="small" :column="1" :labelStyle="{ width: '100px' }">
          <a-descriptions-item label="包含影片">
            <a-tooltip placement="top" v-if="getFilterlist(record.filmList, 1).length > 0">
              <template #title>
                <template v-for="item in record.filmList">
                  <a-tag v-if="item.containStatus == 1" color="blue">
                    {{ item.name }}
                  </a-tag>
                </template>
              </template>
              <div class="hiddenText">
                <template v-for="item in record.filmList">
                  <span v-if="item.containStatus == 1" color="blue">{{ item.name }},</span>
                </template>
              </div>
            </a-tooltip>
            <div v-else>不限制</div>
          </a-descriptions-item>

          <a-descriptions-item label="排除影片">
            <a-tooltip placement="top" v-if="getFilterlist(record.filmList, 0).length > 0">
              <template #title>
                <template v-for="item in record.filmList">
                  <a-tag v-if="item.containStatus == 0" color="blue">
                    {{ item.name }}
                  </a-tag>
                </template>
              </template>
              <div class="hiddenText">
                <template v-for="item in record.filmList">
                  <span v-if="item.containStatus == 0" color="blue">{{ item.name }},</span>
                </template>
              </div>
            </a-tooltip>
            <div v-else>不限制</div>
          </a-descriptions-item>

          <a-descriptions-item label="票数">
            <div v-if="record.seatCount == '0'">不限制</div>
            <div v-else>{{ record.seatCount }}张</div>
          </a-descriptions-item>

          <a-descriptions-item label="包含院线">
            <a-tooltip placement="top" v-if="getFilterlist(record.lineList, 1).length > 0">
              <template #title>
                <template v-for="item in record.lineList">
                  <a-tag v-if="item.containStatus == 1" color="blue">
                    {{ item.name }}
                  </a-tag>
                </template>
              </template>
              <div class="hiddenText">
                <template v-for="item in record.lineList">
                  <span v-if="item.containStatus == 1" color="blue">{{ item.name }},</span>
                </template>
              </div>
            </a-tooltip>
            <div v-else>不限制</div>
          </a-descriptions-item>
        </a-descriptions>
      </template>

      <template v-else-if="column.key === 'beginShowTime'">
        <a-descriptions bordered size="small" :column="1" :labelStyle="{ width: '100px' }">
          <a-descriptions-item label="放映日期">
            <div v-if="record.beginLimitTime != '0'">
              {{ timeFormatYMD(record.beginLimitTime) }} ~
              {{ timeFormatYMD(record.endLimitTime) }}
            </div>
            <div v-else>不限制</div>
          </a-descriptions-item>
          <a-descriptions-item label="放映时间">
            <div>{{ record.beginTime }} - {{ record.endTime }}</div>
          </a-descriptions-item>
          <a-descriptions-item label="星期">
            <span v-if="record.week == '0'">全部</span>
            <span v-else v-for="(item, index) in record.week.split(',')">周{{ item }},</span>
          </a-descriptions-item>

          <a-descriptions-item label="排除院线">
            <a-tooltip placement="top" v-if="getFilterlist(record.lineList, 0).length > 0">
              <template #title>
                <template v-for="item in record.lineList">
                  <a-tag v-if="item.containStatus == 0" color="blue">
                    {{ item.name }}
                  </a-tag>
                </template>
              </template>
              <div class="hiddenText">
                <template v-for="item in record.lineList">
                  <span v-if="item.containStatus == 0" color="blue">{{ item.name }},</span>
                </template>
              </div>
            </a-tooltip>
            <div v-else>不限制</div>
          </a-descriptions-item>
        </a-descriptions>
      </template>

      <template v-else-if="column.key === 'price'">
        <a-descriptions bordered size="small" :column="1" :labelStyle="{ width: '110px' }">
          <a-descriptions-item label="猫淘价区间">
            <div>
              {{ toYuan(record.marketPriceBegin) }} ~
              {{ toYuan(record.marketPriceEnd) }}
            </div>
          </a-descriptions-item>

          <a-descriptions-item label="报价方式">
            <span v-if="record.quotationType == 1">比例加减</span>
            <span v-if="record.quotationType == 2">猫淘价减法</span>
            <span v-if="record.quotationType == 3">固定金额</span>
            <span v-if="record.quotationType == 4">溢价模式</span>
          </a-descriptions-item>

          <a-descriptions-item label="报价金额">
            <span v-if="record.quotationType == 1">
              【猫淘价 * {{ record.quotationPercent }}%】
              <span style="color: #18d818" v-if="record.quotationDiscount >= 0">
                +{{ toYuan(record.quotationDiscount) }}
              </span>
              <span style="color: red" v-else>{{ toYuan(record.quotationDiscount) }}</span>
            </span>
            <span v-if="record.quotationType == 2">
              【猫淘价】
              <span style="color: red">{{ toYuan(record.quotationDiscount) }}</span>
            </span>
            <span v-if="record.quotationType == 3">
              {{ toYuan(record.quotationDiscount) }}
            </span>
            <span v-if="record.quotationType == 4">
              {{ toYuan(record.quotationDiscount) }} + 【溢价部分】
            </span>
          </a-descriptions-item>

          <a-descriptions-item label="单张限价">
            <div v-if="record.limitPrice < 0">
              【预估成本】 + {{ (0 - record.limitPrice) / 100 }}
            </div>
            <div v-if="record.limitPrice > 0">【预估成本】 - {{ record.limitPrice / 100 }}</div>
          </a-descriptions-item>
        </a-descriptions>
      </template>

      <template v-else-if="column.key === 'action'">
        <div style="display: flex; align-items: center">
          <a-switch v-model:checked="record.ruleStatus" @change="handleChangeRules(record)" />
          <div style="width: 20px"></div>

          <div style="width: 100px">
            <a-popconfirm
              title="确定删除？"
              ok-text="是"
              cancel-text="否"
              @confirm="del(record.id)"
            >
              <a>删 除</a>
            </a-popconfirm>
            <a style="margin-left: 10px" @click="edit(record)">修 改</a>
          </div>
        </div>
      </template>
    </template>
  </a-table>

  <!-- 推送 -->
  <div style="margin: 5px 0">
    <span>选择推送闲鱼账号：</span>
    <a-select
      style="width: 150px"
      placeholder="请选择分组"
      v-model:value="groupId"
      @change="selectGroup"
    >
      <a-select-option v-for="(item, index) in groupList" :key="index" :value="item.id">
        {{ item.groupName }}
      </a-select-option>
    </a-select>
    <a-select
      style="width: 50%; margin-left: 5px"
      placeholder="请选择"
      mode="multiple"
      v-model:value="sendRobat"
      @change="selectSendRobat"
      allowClear
      show-search
      :options="optionList"
      :filter-option="filterOption"
    >
      <a-select-option v-for="(item, index) in optionList" :key="index" :value="item.value">
        {{ item.label }}
      </a-select-option>
    </a-select>
    <a-button type="primary" style="margin-left: 10px" @click="sendOk">确认推送</a-button>
    <a-button type="primary" style="margin-left: 10px" @click="SettingTemplate">
      设置为模板
    </a-button>
  </div>

  <AddRole ref="AddRoleRef" @refresh="getList()"></AddRole>
  <ImportRule ref="ImportRuleRef"></ImportRule>
  <Modal
    :width="800"
    :height="800"
    title="请选择勾选单个模版进行保存"
    ref="AddTemplateRef"
    @onConfirmAdd="handleConfirm"
  >
    <template #contentValue>
      <addTemplateContent
        @sendTheID="getTHEID"
        :screenWidth="screenWidth"
        :screenHeight="screenHeight"
        ref="addTemplateContentRef"
        :type="3"
      ></addTemplateContent>
    </template>
  </Modal>

  <Modal
    :width="700"
    :height="600"
    title="自定义院线设置"
    ref="CustomizeRef"
    @onConfirmAdd="CustomizeRef?.setVisible(false)"
  >
    <template #contentValue>
      <a-button type="primary" @click="CinemasRef.setVisible(true)">添加自定义院线</a-button>
      <div style="height: 10px"></div>

      <a-table
        style="overflow-y: scroll"
        :columns="columns1"
        :data-source="dataSource1"
        :pagination="pagination1"
        :loading="loading1"
        @change="changePage1"
        rowKey="id"
        :scroll="{ y: 250 }"
      >
        <template #emptyText>
          <a-empty description="暂无数据" />
        </template>

        <!-- <template #headerCell="{ column }"></template> -->

        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'id'">
            {{ record.id }}
          </template>

          <template v-if="column.key == 'lineName'">
            {{ record.lineName }}
          </template>
          <template v-if="column.key == 'cinemaCount'">
            {{ record.cinemaCount }}
          </template>

          <template v-if="column.key == 'action'">
            <!-- <a-button
                type="primary"
                @click="handleEdit(record)"
                class="mr-2"
              >编辑</a-button> -->

            <div style="display: flex">
              <a-popconfirm
                title="确定要删除吗?"
                ok-text="确定"
                cancel-text="取消"
                @confirm="handleDelete(record)"
              >
                <a-button type="link">删除</a-button>
              </a-popconfirm>

              <div style="width: 10px"></div>
              <a-button type="link" @click="Associated(record)">关联影院</a-button>
            </div>
          </template>
        </template>
      </a-table>
    </template>
  </Modal>
  <!-- 添加院线的弹框 -->
  <Modal
    title="添加院线"
    :width="600"
    :height="600"
    ref="CinemasRef"
    @onConfirmAdd="handleConfiormAddCamera"
  >
    <template #contentValue>
      <a-form>
        <a-form-item label="院线名称" name="name">
          <a-input v-model:value="CameraForm.name" placeholder="院线名称"></a-input>
        </a-form-item>
      </a-form>
    </template>
  </Modal>

  <!-- 关联影院的 弹框 -->

  <Modal
    title="关联影院"
    :width="1000"
    :height="600"
    ref="AssociatedRef"
    @onConfirmAdd="handleConfiormAssociated"
  >
    <template #contentValue>
      <div class="associated-container">
        <div class="header">
          <a-select
            v-model:value="cityVal"
            @change="selectCity"
            v-if="cityList.length > 0"
            placeholder="请选择"
            style="width: 200px; text-align: left"
            show-search
            :options="cityList"
            :filter-option="filterOption"
          >
            <a-select-option v-for="(item, index) in cityList" :key="index" :value="item.value">
              {{ item.label }}
            </a-select-option>
          </a-select>

          <a-input-search
            style="margin-left: 20px"
            v-model:value="CinemaParams.cinemaName"
            placeholder="请输入影院名称"
            @search="onSearchCinema"
            enter-button
          />
        </div>

        <div class="content-data">
          <div class="left">
            <div class="checkbox-all">
              <a-checkbox v-model:checked="allCheck" @change="handelAllChecked">全选</a-checkbox>
            </div>
            <div class="left-title">查询结果</div>
            <div class="left-box" ref="scrollBox" @scroll="handleScroll">
              <div
                class="left-item"
                v-for="(item, index) in CinemaList"
                :key="item.id"
                v-if="CinemaList.length > 0"
              >
                <a-checkbox v-model:checked="item.state" @change="selectedGoodsItem(item, index)">
                  <div
                    style="margin-left: 20px; display: flex; align-items: center"
                    :title="item.cinemaName"
                    class="item-text"
                  >
                    <div style="max-width: 100px" v-if="!cityVal">({{ item.city }}) -</div>
                    <div class="good-title">
                      {{ item.cinemaName }}
                    </div>
                  </div>
                </a-checkbox>
              </div>

              <a-empty v-else></a-empty>
            </div>
            <div class="pageBox">
              <div>tips:分页获取，向下滑动加载更多</div>
              <div>{{ TemporaryList.length }}/{{ CinemaList.length }}</div>
            </div>
          </div>
          <div class="center" @click="handleClickTemporary">
            <ArrowRightOutlined style="font-size: 18px; color: #1890ff" />
          </div>
          <div class="right">
            <div class="selected-title">已选择的影院</div>

            <div class="right-box">
              <div
                class="right-item"
                v-for="(item, index) in selectedCinemaList"
                :key="item.id"
                :title="item.cinemaName"
                v-if="selectedCinemaList.length > 0"
              >
                <!-- <img :src="item.image" v-if="item.image" style="width: 30px; height: 30px" alt="" /> -->
                <div class="good-title">({{ item.city }})-{{ item.cinemaName }}</div>
                <div @click="deleteGoodsItem(index, item)">
                  <DeleteOutlined
                    style="font-size: 16px; color: #858a99; cursor: pointer"
                    class="delete-icon"
                  />
                </div>
              </div>
              <a-empty v-else></a-empty>
            </div>
            <div class="pageBox">
              <div></div>
              <div>{{ TemporaryList.length }}/{{ selectedCinemaList.length }}</div>
            </div>
          </div>
        </div>
      </div>
      <!-- </div> -->
    </template>
  </Modal>
  <SendTemplate ref="sendTemplateRef"></SendTemplate>
</template>

<style lang="less" scoped>
.associated-container {
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .content-data {
    width: 100%;

    .pageBox {
      display: flex;
      align-items: center;
      justify-content: space-between;

      width: 100%;
      margin-top: 10px;
      // margin-left: 10px;
      font-size: 12px;
      color: #1890ff;
    }

    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .left {
      display: flex;
      flex-direction: column;
      // align-items: center;
      position: relative;
      .left-title {
        position: absolute;
        left: 0px;
        top: 20px;
        z-index: 999;
        color: #1890ff;
      }

      .checkbox-all {
        position: absolute;
        left: 12px;
        top: -3px;
        z-index: 999;
      }

      .left-box {
        margin-top: 50px;
        width: 450px;
        height: 360px;
        border: 2px solid #eee;
        border-radius: 5px;
        overflow-y: scroll;
        padding: 10px;

        .left-item {
          display: flex;
          align-items: center;

          .good-title {
            margin-left: 10px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            text-overflow: ellipsis;
            // width: 300px;

            overflow: hidden;
          }
        }

        .left-item:nth-child(n + 2) {
          margin-top: 4px;
        }

        .left-item:nth-child(2n) {
          background-color: rgba(160, 220, 255, 0.5);
          padding: 5px;
          border-radius: 2px;
        }

        .left-item:nth-child(2n-1) {
          background-color: #fff;
          padding: 5px;
          border-radius: 2px;
        }
      }
    }

    .right {
      position: relative;
      .selected-title {
        position: absolute;
        left: 0;
        top: 20px;
        color: #1890ff;
      }
      .right-box {
        margin-top: 50px;
        width: 400px;
        height: 360px;
        border: 2px solid #eee;
        border-radius: 5px;
        overflow-y: scroll;
        padding: 10px;

        .right-item {
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .good-title {
            margin-left: 10px;
            display: -webkit-box;

            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            text-overflow: ellipsis;
            overflow: hidden;
          }
        }

        .right-item:nth-child(n + 2) {
          margin-top: 4px;
        }

        .right-item:nth-child(2n) {
          background-color: rgba(160, 220, 255, 0.5);
          padding: 5px;
          border-radius: 2px;
        }

        .right-item:nth-child(2n-1) {
          background-color: #fff;
          padding: 5px;
          border-radius: 2px;
        }
      }
    }

    .center {
      cursor: pointer;
    }
  }
}
.hiddenText {
  display: inline-block;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  line-height: 16px;
}

.searchBox {
  margin-bottom: 10px;
  display: flex;

  input {
    width: 200px;
    margin-right: 10px;
  }

  button {
    margin-right: 10px;
  }
}

a:hover {
  color: red;
}

.imgBox {
  width: 100px;
  height: 50px;

  img {
    height: 50px;
  }
}

.popoverImg {
  width: 300px;

  img {
    width: 100%;
  }
}

.robitStatusClass {
  text-align: center;
}
</style>
